<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM 节点操作</title>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<p>这是一个文字段落</p>
<script type="text/javascript" src="https://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        //append()方法：将后面的HTML字符串 添加到前面元素的内部末尾。不能使用选择器。
        // $('p').append('<h1>标题标签1</h1>');
        // $('p').append('<h1>标题标签2</h1>');
        //appendTo()方法：将前面选择器选中的元素 添加到后面元素的内部末尾
        // $('div').appendTo('p');
        // $('div').append('p');
        //prepend()方法:将后面的HTML字符串 添加到前面元素的内部前端。不能使用选择器。
        // $('p').prepend('<h1>标题标签3</h1>');
        // $('p').prepend('<h1>标题标签4</h1>');
        //prependTo()方法：
        // $('div').prependTo('p');
        //把p标签插入到第一个div之前
        // $('p').insertBefore('div:first');
        //把第一个div插入到p标签之后
        // $('div:first').insertAfter('p');
        //用页面内已存在的p标签替换div标签
        // $('p').replaceAll('div');
        //移除第2个div标签
        $('div:eq(1)').remove();
        //删除失败，注意删除时索引的变化
        // $('div:eq(2)').remove();
        //清空body标签内的所有元素
        // $('body').empty()
    })
</script>
</body>
</html>